<template>
  <div class="app-container">

    <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="150px" v-loading='loading'>

      <el-form-item label="logo选择">
        <el-select v-model="logoType" placeholder="请选择">
          <el-option v-for="item in logoList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传logo" prop="hyxxkj_web_logo">
        <el-upload :data='{dirName:""}' :headers="headers" :limit="1" list-type="picture-card" ref="uploadIMG" :on-error="fileError" :on-remove="handleRemove" :action="uploadPath" :auto-upload="false" :on-success="handleAvatarSuccess" :on-change="beforeAvatarUpload">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button :loading='loading' type="primary" @click="handlePublish">保存</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
import { weblog } from '@/api/config'
import { uploadPath } from '@/api/storage'
import { getToken } from '@/utils/auth'
export default {
  name: 'banner',
  data() {
    return {
      logoType: 1,
      logoList: [
        {
          id: 1,
          name: '官网LOGO'
        }
      ],
      uploadPath: uploadPath,
      rolesList: [],
      loading: false,
      ruleForm: {
        hyxxkj_web_logo: ''
      },
      rules: {
        hyxxkj_web_logo: [
          {
            required: true,
            message: '请填上传正确格式的图片',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Hyxxkj-Admin-Token': getToken()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleRemove() {
      // 移除图片
      this.ruleForm.hyxxkj_web_logo = ''
    },

    beforeAvatarUpload(file) {
      // 图片改变
      var isJPG = false
      if (
        file.raw.type === 'image/jpeg' ||
        file.raw.type === 'image/png' ||
        file.raw.type === 'image/gif'
      ) {
        isJPG = true
      }
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }
      this.ruleForm.hyxxkj_web_logo = URL.createObjectURL(file.raw)

      return isJPG && isLt2M
    },

    handleAvatarSuccess(res, file) {
      // 上传成功
      if (res.errno == 0) {
        this.ruleForm.hyxxkj_web_logo = res.data.url
        this.Create(this.ruleForm)
      }
    },
    fileError(err, file, fileList) {
      // 上传出错
      this.ruleForm.hyxxkj_web_logo = ''
      this.$message({
        message: '上传出错',
        type: 'warning'
      })
    },

    handlePublish() {
      // 新增图片
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$refs.uploadIMG.submit()
        } else {
          this.$message({
            message: '请检查数据必填项',
            type: 'warning'
          })
          return false
        }
      })
    },

    Create(e) {
      this.loading = true
      if (this.logoType == 1) {
        weblog(e)
          .then((res) => {
            if (res.data.errno == 0) {
              this.loading = false
              this.$message({
                message: '新增成功',
                type: 'success'
              })
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message({
              message: e.data,
              type: 'warning'
            })
          })
      }
    },
    update(e) {
      this.loading = true
      api
        .update(e)
        .then((res) => {
          if (res.data.errno == 0) {
            this.loading = false
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message({
            message: e.data,
            type: 'warning'
          })
        })
    }
  }
}
</script>
<style lang="less" scoped>
</style>